<template>
  <el-select v-model="input" :placeholder="itemConfig.placeholder" @change="handleUpdate" :style="itemConfig.style">
    <el-option v-for="item in options.opt" :key="item.value" :label="item.label" :value="item.value" />
  </el-select>
</template>

<script lang="ts" setup>
  import { ref, PropType, watch, toRefs, reactive } from 'vue';
  import { excempleSelectShi } from '../dataExcemple';
  import { SelectCorrItem, OptionType } from '../common-form-type';

  const props = defineProps({
    itemConfig: {
      type: Object as PropType<SelectCorrItem>,
      default: (): SelectCorrItem => excempleSelectShi,
    },
    itemValue: {
      type: [Number, String, Boolean],
      default: '',
    },
    corrValue: {
      type: [Number, String, Boolean],
      default: '',
    },
  });

  const { itemConfig, itemValue, corrValue } = toRefs(props);
  const input = ref(itemValue.value);
  const options: { opt: Array<OptionType> } = reactive({ opt: [] });
  watch(corrValue, (v) => {
    console.log('省变了！！！', v);
    input.value = '';
    options.opt = itemConfig.value.options(v);
  });

  const emit = defineEmits({
    update: null,
  });

  const handleUpdate = () => {
    emit('update', { val: input.value, prop: itemConfig.value.prop });
  };
</script>
